<template>
  <div class="top">
    <div class="doctor" @click="$router.push('/doctorBot')">
      <img src="../../assets/images/doctor2.png">
  
    </div>
    <div class="top-wrap" v-show="show" @click="goTop()">
        <div class="up iconfont icon-up"></div>
    </div>
  </div>
    
</template>

<script>
import smoothscroll from 'smoothscroll-polyfill';
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    goTop() {
      smoothscroll.polyfill();
      window.scrollTo({
            top: 0,
            behavior: 'smooth',
         });
      // document.documentElement.scrollTop = document.body.scrollTop = 0;
    },
    handleScroll() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      if (top > 200) {
        this.show = true;
      } else {
        this.show = false;
      }
    }
  },
  mounted() {
    setInterval(() => {
      this.handleScroll();
    });
  }
};
</script>

<style lang="scss" scoped>
	.top-wrap {
        width: 50px;
        height: 50px;
		position: fixed;
		top: 70%;
		right: 5%;
		border-radius: 50%;

		background-color: rgba(0, 0, 0,0.2);
    z-index: 99;

	}
	.up {
		font-size: 30px;
    position: absolute;
    right: 20%;
    top: 35%;
	}
.doctor {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 50%;
  right: 7%;
  z-index: 99;
  img {
    width: 70px;
    height: 50px;
  }
}
</style>